@if (currentUrl == "/serial-monitor") {
<app-sub-window [title]="windowInfo" [winBtns]="['go-main', 'minimize', 'maximize', 'close']">
  <ng-container *ngTemplateOutlet="windowBoxTemplate"></ng-container>
</app-sub-window>
} @else {
<app-tool-container [title]="windowInfo" [path]="'/serial-monitor'" (closeEvent)="close()">
  <ng-container *ngTemplateOutlet="windowBoxTemplate"></ng-container>
</app-tool-container>
}
<ng-template #windowBoxTemplate>
  <div class="window-box">
    <!-- <div class="left-bar">
      <div class="btn ccenter selected" nz-tooltip nzTooltipTitle="基础设置" nzTooltipPlacement="left">
        <i class="fa-light fa-gear"></i>
      </div>
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="图表显示" nzTooltipPlacement="left">
        <i class="fa-light fa-chart-line"></i>
      </div>
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="调试辅助" nzTooltipPlacement="left">
        <i class="fa-light fa-bug"></i>
      </div>
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="自动化" nzTooltipPlacement="left">
        <i class="fa-light fa-code-branch"></i>
      </div>
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="高亮设置" nzTooltipPlacement="left">
        <i class="fa-light fa-paint-roller"></i>
      </div>
      <div class="btn ccenter" nz-tooltip nzTooltipTitle="快捷发送" nzTooltipPlacement="left">
        <i class="fa-light fa-keyboard"></i>
      </div>
    </div> -->
    <div class="main-box">
      <div class="settings">
        <div class="line">
          <div class="item">
            <div class="title">串口</div>
            <div class="item-inner ccenter" (click)="openPortList($event)">
              <div class="value">{{currentPort}}</div>
              <div class="arrow-box">
                <i class="fa-light fa-angle-right arrow" [ngClass]="{'down':showPortList}"></i>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">波特率</div>
            <div class="item-inner ccenter" (click)="openBaudList($event)">
              <div class="value">{{currentBaudRate}}</div>
              <div class="arrow-box">
                <i class="fa-light fa-angle-right arrow" [ngClass]="{'down':showBaudList}"></i>
              </div>
            </div>
          </div>
          <div class="setting-btn btn ccenter" nz-tooltip nzTooltipTitle="更多设置" (click)="openMoreSettings()">
            @if(showMoreSettings){
            <i class="fa-light fa-xmark"></i>
            }@else {
            <i class="fa-light fa-gear"></i>
            }
          </div>
          <div class="switch">
            <nz-switch [(ngModel)]="switchValue" (ngModelChange)="switchPort()"></nz-switch>
          </div>
        </div>
      </div>
      @if(showMoreSettings){
      <app-setting-more (settingsChanged)="onSettingsChanged($event)"></app-setting-more>
      }
      <div class="monitor">
        <div class="r-box">
          <!-- <gridster [options]="gridOptions">
            @for (widget of gridDashboard; track widget) {
            <gridster-item [item]="widget">
              <ngx-simplebar [options]="options">
                @for (item of dataList; track $index) {
                <app-data-item [data]="item"></app-data-item>
                }
                <div style="height: 10px;"></div>
              </ngx-simplebar>
            </gridster-item>
            }
          </gridster> -->
          <ngx-simplebar [options]="options">
            @for (item of dataList; track $index) {
            <app-data-item [data]="item" [searchKeyword]="searchKeyword"></app-data-item>
            }
            <div style="height: 10px;"></div>
          </ngx-simplebar>
          @if(searchBoxVisible) {
          <app-search-box (keywordChange)="keywordChange($event)" (prevResult)="navigatePrev()"
            (nextResult)="navigateNext()" [resultsCount]="searchResults.length" [currentIndex]="currentSearchIndex">
          </app-search-box>
          }
        </div>
        <div class="btns">
          <div class="btn ccenter hex" nz-tooltip nzTooltipTitle="HEX显示" (click)="changeViewMode('showHex')"
            [ngClass]="{'actived':showHex}">
            <i class="fa-thin fa-rectangle"></i>
            <div>Hex</div>
          </div>
          <div class="btn ccenter" nz-tooltip nzTooltipTitle="自动换行" (click)="changeViewMode('autoWrap')"
            [ngClass]="{'actived':autoWrap}">
            <i class="fa-light fa-arrow-turn-down-left"></i>
          </div>
          <div class="btn ccenter" nz-tooltip nzTooltipTitle="自动滚动" (click)="changeViewMode('autoScroll')"
            [ngClass]="{'actived':autoScroll}">
            <i class="fa-light fa-arrow-down-to-line"></i>
          </div>
          <div class="btn ccenter" nz-tooltip nzTooltipTitle="时间戳" (click)="changeViewMode('showTimestamp')"
            [ngClass]="{'actived':showTimestamp}">
            <i class="fa-light fa-timer"></i>
          </div>
          <div class="btn ccenter" nz-tooltip nzTooltipTitle="显示不可见字符" (click)="changeViewMode('showCtrlChar')"
            [ngClass]="{'actived':showCtrlChar}">
            <i class="fa-light fa-eye"></i>
          </div>
          <div class="btn ccenter right3" nz-tooltip nzTooltipTitle="搜索" (click)="openSearchBox()">
            <i class="fa-light fa-magnifying-glass" [ngClass]="{'actived': searchBoxVisible}"></i>
          </div>
          <div class="btn ccenter right2" nz-tooltip nzTooltipTitle="导出" (click)="exportData()">
            <i class="fa-light fa-download"></i>
          </div>
          <div class="btn ccenter right" nz-tooltip nzTooltipTitle="清除" (click)="clearView()">
            <i class="fa-light fa-trash-can"></i>
          </div>
        </div>
      </div>
      <div class="sender" nz-resizable [style.height.px]="bottomHeight" [nzMaxHeight]="600" [nzMinHeight]="210"
        (nzResize)="onContentResize($event)">
        <nz-resize-handle nzDirection="top">
          <div class="line"></div>
        </nz-resize-handle>
        <div class="s-box">
          <!-- 快捷发送栏 -->
          <div class="settings" style="padding: 0;">
            <app-quick-send-list (openMore)="openQuickSendEditor()"></app-quick-send-list>
          </div>
          <div class="input-box">
            <textarea class="sscroll vsfont" nz-input [(ngModel)]="inputValue" (keydown)="onKeyDown($event)"></textarea>
          </div>
          <div class="btns">
            <div class="btn ccenter hex" nz-tooltip nzTooltipTitle="HEX显示" (click)="changeInputMode('hexMode')"
              [ngClass]="{'actived':hexMode}">
              <i class="fa-thin fa-rectangle"></i>
              <div>Hex</div>
            </div>
            <div class="btn ccenter enter" nz-tooltip nzTooltipTitle="回车发送" (click)="changeInputMode('sendByEnter')"
              [ngClass]="{'actived':sendByEnter}">
              <i class="fa-light fa-arrow-turn-down-left"></i>
            </div>
            <div class="btn ccenter enter" nz-tooltip nzTooltipTitle="\r 结束符" (click)="changeInputMode('endR')"
              [ngClass]="{'actived':endR}">
              <i class="fa-light fa-r"></i>
            </div>
            <div class="btn ccenter enter" nz-tooltip nzTooltipTitle="\n 结束符" (click)="changeInputMode('endN')"
              [ngClass]="{'actived':endN}">
              <i class="fa-light fa-n"></i>
            </div>
            <!-- <div class="btn ccenter right3" nz-tooltip nzTooltipTitle="历史记录" (click)="openHistoryList()">
              <i class="fa-light fa-clock-rotate-left"></i>
            </div> -->
            <button class="right ccenter" nz-button nzType="primary" nz-tooltip
              [nzTooltipTitle]="sendByEnter?'Enter':'Ctrl+Enter'" (click)="send()">
              发送
            </button>
          </div>
          @if(showHistoryList) {
          <app-history-message-list (close)="showHistoryList=false" (send)="send($event)"
            (value)="this.inputValue=$event;showHistoryList=false"></app-history-message-list>
          }
          @if(showQuickSendEditor){
          <app-quick-send-editor></app-quick-send-editor>
          }
        </div>
      </div>
    </div>
  </div>
</ng-template>

<!-- device port list -->
@if (showPortList) {
<app-menu [position]="position" [width]="260" [menuList]="portList" (closeEvent)="closePortList()"
  [keywords]="boardKeywords" (itemClickEvent)="selectPort($event)"></app-menu>
}

<!-- baudrate list -->
@if (showBaudList) {
<app-menu [position]="position" [width]="90" [menuList]="baudList" (closeEvent)="closeBaudList()"
  (itemClickEvent)="selectBaud($event)"></app-menu>
}